<template>
  <div class="home-wrapper">
     <newNav/>
     <div class="banner">
     <img class="banner-logo" src="../assets/images/banner-logo.png" alt="">
      <div class="title">
        {{$t('user.M_home_coming_soon')}}
      </div>
      <div class="tip">
        {{$t('user.M_home_project_info')}}
      </div>
     </div>
     <div class="content">
        <!-- <div class="box plan">
          <div class="title">{{$t('user.M_home_four_pool_title')}}</div>
          <div class="sub-title">{{$t('user.M_home_four_pool_sub')}}</div>
          <div class="list">
            <div class="plan-item">
              <div class="name">{{$t('user.M_home_four_pool_p1_t')}}</div>
              <p>{{$t('user.M_home_four_pool_p1_d')}}</p>
            </div>
            <div class="plan-item">
              <div class="name">{{$t('user.M_home_four_pool_p2_t')}}</div>
              <p>{{$t('user.M_home_four_pool_p2_d')}}</p>
            </div>
            <div class="plan-item">
              <div class="name">{{$t('user.M_home_four_pool_p3_t')}}</div>
              <p>{{$t('user.M_home_four_pool_p3_d')}}</p>
            </div>
            <div class="plan-item">
              <div class="name">{{$t('user.M_home_four_pool_p4_t')}}</div>
              <p>{{$t('user.M_home_four_pool_p4_d')}}</p>
            </div>
          </div>
        </div> -->
        <div class="home-ig">
          <img v-if="lang == 'zh'" src="../assets/home-img-tree-cn.jpg" alt="">
          <img v-if="lang == 'en'" src="../assets/home-img-tree-en.jpg" alt="">
          <img v-if="lang == 'ko'" src="../assets/home-img-tree-ko.jpg" alt="">
          <img v-if="lang == 'es'" src="../assets/home-img-tree-es.jpg" alt="">
          <img v-if="lang == 'jp'" src="../assets/home-img-tree-jp.jpg" alt="">
        </div>
        <div class="box eth">
          <div class="title">{{$t('user.M_home_eth_title')}}</div>
          <div class="sub-title">{{$t('user.M_home_eth_sub')}}</div>
          <div class="eth-auth-pro">
            <img class="img" src="../assets/images/home-authorization-MFI.png" alt="">
            <div class="arrow">
              <span>{{$t('user.M_home_eth_auth_text')}}</span>
              <img class="arrow" src="../assets/images/home-authorization-arrow.png" alt="">
            </div>
            <img class="img" src="../assets/images/home-authorization-YFII.png" alt="">
          </div>
          <div class="list">
            <div class="eth-item">
              <div class="name">{{$t('user.M_home_eth_l1_t')}}</div>
              <div class="tip">{{$t('user.M_home_eth_l1_p')}}</div>
              <p>3000WETH</p>
            </div>
            <div class="eth-item">
              <div class="name">{{$t('user.M_home_eth_l2_t')}}</div>
              <div class="tip">{{$t('user.M_home_eth_l2_p')}}</div>
              <p>0.0000YFII</p>
            </div>
          </div>
          <p class="tip">{{$t('user.M_home_eth_tip')}}</p>
          <div class="table">
            <div class="col">
              <div class="name">ETH</div>
            </div>
            <div class="col">
              <div class="name">{{$t('user.M_home_eht_table_name1')}}</div>
              <div class="list">
                <div class="item">
                  <img src="../assets/images/home-exchange-mkr@2x.png" alt="">
                  <span>MKR</span>
                </div>
                <div class="item">
                  <img src="../assets/images/home-exchange-bat@2x.png" alt="">
                  <span>BAT</span>
                </div>
                <div class="item">
                  <img src="../assets/images/home-exchange-link@2x.png" alt="">
                  <span>LINK</span>
                </div>
                <div class="item">
                  <img src="../assets/images/home-exchange-knc@2x.png" alt="">
                  <span>KNC</span>
                </div>
                <div class="item">
                  <img src="../assets/images/home-exchange-snx@2x.png" alt="">
                  <span>SNX</span>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="name">{{$t('user.M_home_eht_table_name2')}}</div>
              <div class="list">
                <div class="item">
                  <span>5%</span>
                </div>
                <div class="item">
                  <span>16%</span>
                </div>
                <div class="item">
                  <span>13%</span>
                </div>
                <div class="item">
                  <span>25%</span>
                </div>
                <div class="item">
                  <span>27%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box analysis">
          <div class="title">{{$t('user.M_home_analysis_title')}}</div>
          <div class="list">
            <div class="analysis-item">
              <img src="../assets/images/home-bright-01@2x.png" alt="">
              <p>{{$t('user.M_home_analysis_l1_d')}}</p>
            </div>
            <div class="analysis-item">
              <img src="../assets/images/home-bright-02@2x.png" alt="">
              <p>{{$t('user.M_home_analysis_l2_d')}}</p>
            </div>
            <div class="analysis-item">
              <img src="../assets/images/home-bright-03@2x.png" alt="">
              <p>{{$t('user.M_home_analysis_l3_d')}}</p>
            </div>
            <div class="analysis-item">
              <img src="../assets/images/home-bright-04@2x.png" alt="">
              <p>{{$t('user.M_home_analysis_l4_d')}}</p>
            </div>
          </div>
        </div>
     </div>
     <div class="bottom-bai">
       <homeBottom></homeBottom>
     </div>
     <div class="bottom-area">
      Copyright © 2020,Metapool
     </div>
  </div>
</template>

<script>
import newNav from '../components/newNav'
import homeBottom from '../components/public/homeBottom'
export default {
  name: 'home',
  data () {
    return {
    }
  },  
  components:{ newNav,homeBottom },
  mounted() {
   
  },
  computed: {
    lang(){
      return this.$i18n.locale
    }
  },
  methods: {
    handleBtnEvent(opts) {
      switch(opts.type){
        case 'route':
        this.$router.push(opts.path)
        break;
        case 'link':
        window.open(opts.link, '_blank');
        break;
        default:
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">

@media only screen and (min-width: 0px) and (max-width: 639px){
  .home-wrapper {
    background: #fff;
    color: #000;
    font-size: 16px;
    >.banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 80px 20px;
      color: #fff;
      background: url('../assets/images/home-banner.jpg')  center center no-repeat;
      background-size: cover;
      
      >.banner-logo {
        width: 50%;
      }
      >.title {
        color:#FAC200;
        font-size: 18px;
        letter-spacing: 20px;
        padding-bottom: 68px;
      }
      
      >.tip {
        font-size: 14px;
        color: #fff;
        opacity: .8;
        line-height: 32px;
      }
    }
    >.content {
      background: #fff;
      padding: 0 15px;
      >.home-ig{
        >img{
          width: 100%;
        }
      }
      >.box {
        margin-top: 40px;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.eth {
          .eth-auth-pro {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 50px;
            >.img {
              height: 30px;
            }
            >.arrow {
              margin: 0 24px;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0 0 30px;
              span {
                font-size: 18px;
                color: #FDC300;
                padding-bottom: 10px;
              }
            }
            
          }
          >.list {
            width: 100%;
            .eth-item {
              position: relative;
              width: 384px;
              height: 134px;
              background: #FFFFFF;
              box-shadow: -3px 0px 29px 0px rgba(97, 97, 97, 0.2);
              border-radius: 20px;
              margin: 0 16px 32px;
              text-align: left;
              padding: 30px 34px;
              >.tip {
                position: absolute;
                right: -10px;
                top: 24px;
                width: 71px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #fff;
                background: #EFB133;
                border-radius: 16px 0px 16px 16px;
              }
              >.name {
                font-size: 20px;
                opacity: .7;
                padding-bottom: 16px;
              }
              >p {
                font-size: 24px;
              }
            }
          }
          >.tip {
            padding-top: 50px;
            font-size: 20px;
            opacity: .8;
            line-height: 26px;
          }
          >.table {
            transform: scale(.5);
            display: flex;
            align-items: center;
            >.col {
              width: 200px;
              height: 309px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              border: 1px solid #E5E5E5;
              &:first-child {
                line-height: 309px;
                text-align: center;
                border-right: 0;
                border-radius: 20px 0 0 20px;
              }
              &:last-child {
                border-left: 0;
                border-radius: 0 20px 20px 0;
              }
              >.name {
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                padding: 10px 0;
              }
              >.list {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                >.item {
                  border-top: 1px solid #E5E5E5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 18px;
                  flex: 1;
                  >img {
                    width: 30px;
                    height: 30px;
                    flex-shrink: 0;
                    margin-right: 14px;
                  }
                }
              }
            }
          }
        }
        &.analysis {
          margin-top: 0px;
          >.list {
            margin-top: 30px;
            >div {
              width: 267px;
              min-height: 323px;
              background: #FFFFFF;
              box-shadow: -3px 0px 30px 0px rgba(97, 97, 97, 0.2);
              border-radius: 20px;
              margin: 0 12px 24px;
              padding: 36px 22px;
              text-align: left;
              >img {
                width: 40px;
                height: 40px;
                margin-bottom: 30px;
              }
              >p{
                font-size: 16px;
                line-height: 28px;
              }

            }
          }
        }
        >.title {
          font-size: 22px;
          font-weight: bold;
          padding-bottom: 30px;
        }
        >.sub-title {
          font-size: 18px;
          line-height: 30px;
          opacity: .8;
        }
        >.list {
          margin-top: 40px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          >.plan-item {
            width: 250px;
            height: 250px;
            border: 1px solid #E5E5E5;
            border-radius: 20px;
            margin-top: 24px;
            padding: 15px;
            text-align: left;
            >.name {
              font-weight: bold;
              font-size: 20px;
              padding-bottom: 18px;
            }
            >p {
              font-size: 14px;
            }
          }
        }
      }
    }
    >.bottom-area {
      padding-bottom: 60px;
      font-size: 16px;
      opacity: .6;
    }
    >.bottom-bai{
      padding: 15px;
      padding-top: 60px;
    }
  }
 
}


@media only screen and (min-width: 640px) {
  .home-wrapper {
    background: #fff;
    color: #000;
    font-size: 16px;
    
    >.banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 143px 24% 82px;
      color: #fff;
      background: url('../assets/images/home-banner.jpg')  center center no-repeat;
      background-size: cover;
      
      >.banner-logo {
        width: 422px;
      }
      >.title {
        color:#FAC200;
        font-size: 24px;
        letter-spacing: 20px;
        padding-bottom: 68px;
      }
      
      >.tip {
        font-size: 16px;
        color: #fff;
        opacity: .8;
        line-height: 32px;
      }
    }
    >.content {
      background: #fff;
      padding: 0 18%;
      >.home-ig{
        >img{
          width: 1049px;
          margin-top: 10px;
        }
      }      
      >.box {
        margin-top: 90px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        &.eth {
          .eth-auth-pro {
            display: flex;
            align-items: center;
            margin-top: 50px;
            >.img {
              height: 50px;
            }
            >.arrow {
              margin: 0 24px;
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0 0 30px;
              span {
                font-size: 20px;
                color: #FDC300;
                padding-bottom: 10px;
              }
            }
            
          }
          >.list {
            .eth-item {
              position: relative;
              width: 384px;
              height: 134px;
              background: #FFFFFF;
              box-shadow: -3px 0px 29px 0px rgba(97, 97, 97, 0.2);
              border-radius: 20px;
              margin: 0 16px 32px;
              text-align: left;
              padding: 30px 34px;
              >.tip {
                position: absolute;
                right: -10px;
                top: 24px;
                width: 71px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #fff;
                background: #EFB133;
                border-radius: 16px 0px 16px 16px;
              }
              >.name {
                font-size: 20px;
                opacity: .7;
                padding-bottom: 16px;
              }
              >p {
                font-size: 28px;
              }
            }
          }
          >.tip {
            padding: 50px 0;
            font-size: 20px;
            opacity: .8;
            line-height: 26px;
          }
          >.table {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            >.col {
              width: 200px;
              height: 309px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              border: 1px solid #E5E5E5;
              &:first-child {
                line-height: 309px;
                text-align: center;
                border-right: 0;
                border-radius: 20px 0 0 20px;
              }
              &:last-child {
                border-left: 0;
                border-radius: 0 20px 20px 0;
              }
              >.name {
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                padding: 10px 0;
              }
              >.list {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                >.item {
                  border-top: 1px solid #E5E5E5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 18px;
                  flex: 1;
                  >img {
                    width: 30px;
                    height: 30px;
                    flex-shrink: 0;
                    margin-right: 14px;
                  }
                }
              }
            }
          }
        }
        &.analysis {
          >.list {
            >div {
              width: 267px;
              min-height: 323px;
              background: #FFFFFF;
              box-shadow: -3px 0px 30px 0px rgba(97, 97, 97, 0.2);
              border-radius: 20px;
              margin: 0 12px 24px;
              padding: 36px 22px;
              text-align: left;
              >img {
                width: 50px;
                height: 50px;
                margin-bottom: 30px;
              }
              >p{
                font-size: 16px;
                line-height: 28px;
              }

            }
          }
        }
        >.title {
          font-size: 36px;
          font-weight: bold;
          padding-bottom: 50px;
        }
        >.sub-title {
          font-size: 18px;
          line-height: 30px;
          opacity: .8;
        }
        >.list {
          margin-top: 60px;
          display: flex;
          justify-content: center;
          >.plan-item {
            width: 250px;
            height: 250px;
            border: 1px solid #E5E5E5;
            border-radius: 20px;
            margin: 0 12px 24px;
            padding: 26px;
            text-align: left;
            >.name {
              font-weight: bold;
              font-size: 20px;
              padding-bottom: 18px;
            }
            >p {
              font-size: 14px;
            }
          }
        }
      }
    }
    >.bottom-area {
      padding-bottom:80px;
      font-size: 16px;
      opacity: .6;
    }
    .bottom-bai{
      width: 1200px;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
  }
}

</style>
